import * as React from 'react';
import { Text, View, TextInput,StyleSheet, Image,
    TouchableOpacity,ScrollView
} from 'react-native';
import MiddleItem from './View/Home/MiddleItem'
export default class App extends React.Component {
    constructor(props){
        super(props)
        //1定义属性2值的改变3使用属性setState({text:234})
        this.state ={
            text:'123'   //1定义state
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.navstyle}>
                    <TouchableOpacity activeOpacity={0.5}
                                      onPress = {() =>{alert("大连被点击了")}}
                    >
                        <Text style={{color:'#fff'}}>
                            大连
                        </Text>
                    </TouchableOpacity>
                    <TextInput placeholder = "请输入搜索的内容"
                        // onChangeText = {(params) => {this.setState({text:params})}}
                               onChangeText = {this.textChange.bind(this)}
                               style={styles.inputStyle} />
                    <TouchableOpacity activeOpacity={0.5}
                                      onPress = {() =>{alert("图片被点击了")}}
                    >
                        <Image source ={require('./assets/dot.png')} />
                    </TouchableOpacity>
                </View>
                <View>
                    <Image source ={require('./assets/school.jpg')} style={{height:250}} />
                </View>
                <View>
                    <ScrollView>
                        <View>
                            {/*注释结构：顶端的9宫格效果，我们先写一个item*/}
                            <View  style={{flexDirection:'row',justifyContent:'space-between'}}>
                                {/*注释结构：顶端的9宫格效果，我们先写一个item*/}
                                <MiddleItem name={'外卖'}/>
                                <MiddleItem />
                                <MiddleItem />
                                <MiddleItem />
                            </View>
                        </View>
                    </ScrollView>
                </View>
            </View>
        );
    }
    textChange(params){
        this.setState({
            text:params
        })
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ecf0f1',
    },
    inputStyle:{
        height:38,
        width:305,
        backgroundColor: '#FFF',
        borderRadius:15,
    },
    navstyle:{
        padding:5,
        height:60,
        backgroundColor: '#E60153',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between'
    }
});
